<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML lang="en">

<HEAD>
  <META name="author" content="Ian Hickson">
  <META name="copyright" content="&copy; copyright 1999 Ian Hickson">
  <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <META http-equiv="Content-Style-Type" content="text/css">
  <TITLE>Evil Tests: Generic Table Tests 1</TITLE>

  <STYLE TYPE="text/css">
 
    .table { display: table; border: none; }
    .cell { display: table-cell; border: none; }
    .row { display: table-row; border: none; }

    .full { width: 100%; }
    .indented { margin-left: 5em; margin-right: 5em; }
    .outdented { margin-left: -5em; margin-right: -5em; }

    .gray { background: silver; color: black; } 

    .left { text-align: left; }
    .right { text-align: right; }

    .hide.this { display: none; } .note { border: double thick red;
    padding: 0.5em; }
    
  </STYLE>

</HEAD>

<BODY>

<H1>Generic Table Tests - 1</H1>

<p>If you have any comments to make regarding this test, e-mail <a
href="mailto:py8ieh=eviltests-table@bath.ac.uk">py8ieh=eviltests@bath.ac.uk</a>.</p>

<dl>
 <dt>Prerequisites</dt>
 <dd>Browsers that are subjected to this test should support CSS1 and the CSS2 table model, and multiple classes.</dd>
</dl>

<P class=note>If this paragraph breaks the line here: <SPAN
class=table>and here:</SPAN> then your browser <em>does support</em>
table values on 'display'. <strong>If this paragraphs flows without
any undue breaks, then you should mark your browser as not supporting
table values!</strong></P>


<!--
<P class="hide this">Multiple classes are not supported in this browser!</P>
<P><em>Every</em> example on this entire page should look the same.</P>
-->

<h2>1. Table -&gt; Table Cell</h2>

<P>Below there should be a gray bar, spanning the width of the BODY,
with the text "Left" to the left and the text "Right", on the same
line, flush to the right.</P>

   <DIV class="full gray table">
      <DIV class="left cell">Left</DIV>
      <DIV class="right cell">Right</DIV>
   </DIV>


<!-- INVALID TESTS
<h2>2. Auto Width</h2>

<p><strong>David, this test and the next one are those for which
NGLayout is not following Section 10.</strong></p>

<P>Below there should be the same gray bar as in test 1.</P>

   <DIV class="gray table">
      <DIV class="left cell">Left</DIV>
      <DIV class="right cell">Right</DIV>
   </DIV>

<P>This is because since the table has <code>width:auto</code> (which
is implied) and the margins are also <code>auto</code> (which is also
implied), and the padding is zero (more implication...), the margins
should be set to 0, and the width should be set to the containing
block's content width (the BODY's width). This is exactly the same as
setting <code>width</code> to 100% as is done in the first test.</P>

<h2>3. Negative Margins</h2>

<P>Below there should be the same gray bar as in test 1. Again.</P>

   <DIV class="indented">
      <DIV class="outdented gray table">
         <DIV class="left cell">Left</DIV>
         <DIV class="right cell">Right</DIV>
      </DIV>
   </DIV>


<h2>4. Table Row -> Table Cell</h2>

<P><strong>NGLayout is simply not doing anything with the table
elements here!</strong></P>

<P>This example should, once more, be exactly the same as the gray bar
in test 1.</P>

   <DIV class="gray row">
      <DIV class="left cell">Left</DIV>
      <DIV class="right cell">Right</DIV>
   </DIV>


<h2>4. Lone Cells</h2>

<P>Guess what! This example should look the same as that in part 1 of
this page!</P>

   <DIV class="gray cell on left">Left</DIV>
   <DIV class="gray cell on right">Right</DIV>


<h2>4. Table Row -> Non Tabular Content & Cells</h2>

<P>This should, once more, look the same as the first example...</P>

   <DIV class="gray table">
      <DIV class="left">Left</DIV>
      <DIV class="right cell">Right</DIV>
   </DIV>

-->


<h2>Submit Results</h2>

    <FORM action="/%7Epy8ieh/cgi/newresult.pl" method="POST" class="resultsubmission">
      <P>How does your browser fare on this test?
        <SELECT NAME="result">
           <OPTION VALUE="Y"> The test renders correctly. </OPTION>
           <OPTION VALUE="B"> The test renders incorrectly. </OPTION>
           <OPTION VALUE="N"> Table values for 'display' not supported. </OPTION>
<!--           <OPTION VALUE="U"> Untestable: Multiple classes not supported. </OPTION>-->
           <OPTION VALUE="U"> Untestable: CSS not supported. </OPTION>
        </SELECT>
        <LABEL>Comment: <INPUT TYPE="text" NAME="comment"></LABEL>
        <INPUT TYPE="submit" VALUE="Submit">
      </P>
    </FORM>


<HR title="Footer">
<p>Up to the <a href="home.html">Table Tests</A>.</p>
<p>Up to the <a href="../home.html">Evil Tests Page</A>.</p>
<!--<P>Bugzilla: <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=1959">Bug 1959</A></P>-->
<p>This page is maintained by <a class=External HREF="http://www.bath.ac.uk/%7Epy8ieh/">Ian Hickson</A> (<a class=Mail HREF="mailto:py8ieh=website@bath.ac.uk">py8ieh@bath.ac.uk</A>).</p>
<p>Last updated in March 1999.</p>

</BODY></HTML>

